<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <!-- 引入我的css样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_edit.css">
    <!-- 引入jquery
        法一 -->
    <script src="./js/jquery.min.js"></script>
    <!-- 
        法二:
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> -->

    <!-- 引入markdown的css和js 
        注意：先引入jquery，再引入markdown的js-->
    <link rel="stylesheet" href="./editor.md/css/editormd.min.css">
    <script src="./editor.md/lib/marked.min.js"></script>
    <script src="./editor.md/lib/prettify.min.js"></script>
    <script src="./editor.md/editormd.js"></script>

</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./image/p7.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个div仅仅用于占位，将下列三个a标签挤到右边，而无显示作用。 -->
        <div class="space"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 编辑区的容器 -->
    <div class="edit-container">
        <!-- 博客标题编辑区 -->
        <div class="blog-title">
            <input type="text" id="title" placeholder="在此输入博客标题">
            <span id="submit">发布文章</span>
        </div>
        <!-- 博客编辑器，markdown编辑器,使用id选择器和markdown集成对接 -->
        <div id="editor">
        </div>
        <script>
            // 初始化编辑器, 代码也是截取自 官方文档 . 
            var editor = editormd("editor", { // 注意：这里"editor"对应div#editor必须是id选择器
                // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                width: "100%",
                // 设定编辑器高度
                height: "100%",
                // 编辑器中的初始内容
                markdown: "## hello world",
                // 指定 editor.md 依赖的插件路径
                path: "editor.md/lib/"
            });
        </script>
    </div>
</body>
</html>